import React, { Component } from 'react'
import List from "./component/List"
import Header from './component/Header'
import Footer from './component/Footer'
import './App.css'
import { v4 as uuidv4 } from 'uuid';

export default class App extends Component {
    state = {
        input: '',
        todos: [
            { id: uuidv4(), todo: '游戏', done: true }
        ]
    }
    // 输入框输入（传入Header中使用）
    inputStateChange = ( data ) => {
        this.setState({ input: data });
    }


    // 按下回车事件（传入Header中使用）
    keyUpEnterChange = ( obj ) => {
        this.setState({ todos: [ obj, ...this.state.todos ]})
    }

    // 改变选中状态(要通过List组件传入Item组件中)
    checkedStateChange = ( id, done ) => {
        let todos = this.state.todos.map( ( todo, index ) => {
            if( todo.id === id ) return { ...todo, done }
            return todo
        })
        this.setState({ todos });
    }

    // 删除选中项（通过list组件传入Item组件中）
    deleteTodoItem = ( id ) => {
        let todos = this.state.todos.filter( ( todo ) => {
            return todo.id !== id
        });
        this.setState({ todos });
    }

    // 全选(传入Footer组件中)
    selectAllStateChange = ( done ) => {
        let todos = this.state.todos.map( ( todo, index ) => {
            return { ...todo, done }
        })
        this.setState({ todos });
    }

    // 清除已选项
    clearHasDone = () => {
        let todos = this.state.todos.filter( ( todo ) => {
            return todo.done !== true
        })
        this.setState({ todos });
    }




    render() {
        return (
            <div>
                <div className="todo-container">
                    <div className="todo-wrap">
                        <Header inputStateChange={ this.inputStateChange } keyUpEnterChange={ this.keyUpEnterChange }></Header>
                        <List todos={ this.state.todos } checkedStateChange={ this.checkedStateChange } deleteTodoItem={ this.deleteTodoItem }></List>
                        <Footer todos={ this.state.todos } selectAllStateChange={this.selectAllStateChange} clearHasDone={ this.clearHasDone }></Footer>
                    </div>
                </div>
            </div>
        )
    }
}
